<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:replace="/common/include :: header(~{::title}, ~{::link}, ~{::style})">
    <title>DEMO-表单-互选组件</title>
    <link th:href="@{/lib/bootstrap-duallistbox/bootstrap-duallistbox.min.css}" rel="stylesheet" type="text/css"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>双重列表框
                        <small>https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox</small>
                    </h5>
                </div>
                <div class="ibox-content">
                    <p>
                        Bootstrap Dual Listbox是针对Twitter Bootstrap进行了优化的响应式双列表框。它适用于所有现代浏览器和触摸设备。
                    </p>

                    <form id="form" action="#" class="wizard-big">
                        <select class="form-control dual_select" multiple>
                            <option value="100">管理员</option>
                            <option value="101" selected>Demo</option>
                            <option value="102">普通用户</option>
                        </select>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="/common/include :: footer"></div>
<div th:replace="/common/include :: duallistboxJs"></div>

<script type="text/javascript">
    $('.dual_select').bootstrapDualListbox({
        nonSelectedListLabel: '未选中',
        selectedListLabel: '已选中',
        preserveSelectionOnMove: '移动',
        moveOnSelect: false,           // 出现一个剪头，表示可以一次选择一个
        filterTextClear: '展示所有',
        moveSelectedLabel: '添加',
        moveAllLabel: '添加所有',
        removeSelectedLabel: '移除',
        removeAllLabel: '移除所有',
        infoText: '共{0}个',
        showFilterInputs: true,       // 是否带搜索
        selectorMinimalHeight: 160
    });
</script>
</body>
</html>
